<template>
  <div
    class="normal-home-hot-area-item"
    :class="{ preview: preview }"
    ref="hotRef"
    :style="wrapperStyle"
    :id="id"
    @mousedown="handleMouseDown"
    @mouseover="handleMouseOver"
    @click="handleHotClick"
    v-if="preview || !cdata.wxJump || isMinProgram"
  >
    <span v-if="preview" class="range">{{ range + 1 }}</span>
    <template v-if="preview && cdata.active">
      <resize
        :cdata="cdata"
        :list="list"
        :range="range"
        class="resizeLT"
        isLeft
        isTop
      />
      <resize
        :cdata="cdata"
        :list="list"
        :range="range"
        class="resizeT"
        isTop
        lockX
      />
      <resize
        :cdata="cdata"
        :list="list"
        :range="range"
        class="resizeTR"
        isTop
      />
      <resize
        :cdata="cdata"
        :list="list"
        :range="range"
        class="resizeR"
        lockY
      />
      <resize :cdata="cdata" :list="list" :range="range" class="resizeBR" />
      <resize
        :cdata="cdata"
        :list="list"
        :range="range"
        class="resizeB"
        lockX
      />
      <resize
        :cdata="cdata"
        :list="list"
        :range="range"
        class="resizeLB"
        isLeft
      />
      <resize
        :cdata="cdata"
        :list="list"
        :range="range"
        class="resizeL"
        isLeft
        lockY
      />
    </template>
  </div>
  <wx-open-launch-weapp
    v-else
    class="normal-home-hot-area-item"
    :style="wrapperStyle"
    :id="id"
    :username="cdata.appletId"
    :path="cdata.appletUrl"
  >
  </wx-open-launch-weapp>
</template>

<script>
import Resize from "./Resize";
export default {
  components: { Resize },
  props: {
    preview: Boolean,
    cdata: {
      type: Object,
      default() {
        return {};
      },
    },
    range: {
      type: Number,
      default: 0,
    },
    statusInfo: Object,
    list: {
      type: Array,
      default() {
        return () => [];
      },
    },
    id: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      ratio: 37.5,
      disX: 0,
      disY: 0,
      isMinProgram: false,
      tabPage: [
        "/pages/home/index",
        "/mall/pages/member-center-v3/index",
        "/forum/pages/home/index",
      ],
    };
  },
  computed: {
    wrapperStyle() {
      const { width, height, top, left } = this.cdata;
      return {
        width: width / this.ratio + "rem",
        height: height / this.ratio + "rem",
        top: top / this.ratio + "rem",
        left: left / this.ratio + "rem",
      };
    },
  },
  created() {
    this.checkEnv();
  },
  methods: {
    checkEnv() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        DATA.isWeiXin = true;
        try {
          window.wx.miniProgram.getEnv((res) => {
            if (res.miniprogram) {
              // 是否微信小程序环境
              this.isMinProgram = true;
            }
          });
        } catch (error) {
          console.log(error);
        }
      }
    },
    getPosition() {
      let target = this.$refs.hotRef;
      return [...this.list]
        .filter((v, idx) => idx !== this.range)
        .map((item) => {
          // 左侧
          item.isLeft = target.offsetLeft >= item.left + item.width;
          // 右侧
          item.isRight = target.offsetLeft <= item.left - target.offsetWidth;
          // 上侧
          item.isTop = target.offsetTop >= item.top + item.height;
          // 下侧
          item.isBottom = target.offsetTop <= item.top - target.offsetHeight;
          return item;
        });
    },
    handleHotClick() {
      if (!this.preview) {
        const { status, preventText } = this.statusInfo;
        if (status !== "active") {
          // preventText && this.$toast(preventText);
        } else if (
          this.cdata.wxJump &&
          this.isMinProgram &&
          this.cdata.linkType === 1
        ) {
          let { appletUrl } = this.cdata;
          appletUrl = appletUrl || "";
          console.log("本小程序 appletUrl： ", appletUrl);
          if (this.tabPage.some((path) => appletUrl.split("?")[0] === path)) {
            window.wx.miniProgram.switchTab({
              url: appletUrl,
            });
          } else {
            window.wx.miniProgram.navigateTo({
              url: appletUrl,
            });
          }
        } else if (
          this.cdata.wxJump &&
          this.isMinProgram &&
          this.cdata.linkType === 2
        ) {
          let { appletUrl1, appletId1 } = this.cdata;
          appletUrl1 = appletUrl1 || "";
          let appId = appletId1;
          let redirectPath = appletUrl1;
          console.log("第三方小程序 appletUrl： ", appId, redirectPath);
          let url = `/pages/h5-navigate-to-weapp/index?appId=${appId}&redirectPath=${redirectPath}`;
          // let url = `/pages/index/index`;
          window.wx.miniProgram.navigateTo({
            url: url,
            success: function (res) {
              console.log("success", res);
            },
            fail: function (res) {
              console.log("fail", res);
            },
          });
        } else {
          window.location.href = this.cdata.url;
        }
      }
    },
    handleMouseOver(event) {
      event.stopPropagation();
      if (this.cdata.active) return;
      this.list.map((item, index) => {
        item.active = index === this.range;
        return item;
      });
    },
    handleMouseDown(event) {
      if (!this.preview) return;
      event.stopPropagation();
      this.disX = event.clientX - this.$refs.hotRef.offsetLeft;
      this.disY = event.clientY - this.$refs.hotRef.offsetTop;
      this.$nextTick(() => {
        document.onmousemove = this.handleMouseMove;
        document.onmouseup = this.handleMouseUp;
        document.onmousecancel = this.handleMouseUp;
      });
    },
    handleMouseMove(event) {
      if (!this.preview) return;
      event.stopPropagation();
      this.getPosition();
      let target = this.$refs.hotRef;
      let iL = event.clientX - this.disX;
      let iT = event.clientY - this.disY;
      const maxL = target.parentElement.offsetWidth - target.offsetWidth - 2;
      const maxT = target.parentElement.offsetHeight - target.offsetHeight - 2;
      // 最外层边界判断
      iL = Math.max(iL, 0);
      iT = Math.max(iT, 0);
      iL = Math.min(iL, maxL);
      iT = Math.min(iT, maxT);
      // 覆盖监测-不能覆盖其他热区
      const positions = this.getPosition();
      //开启注释 拖拽不能覆盖其他热区
      // positions.map(item => {
      //   // 左侧
      //   if (item.isLeft && (iT + target.offsetHeight) > item.top && iT < (item.top + item.height)) {
      //     iL = Math.max(iL, item.left + item.width);
      //   }
      //   // 右侧
      //   if (item.isRight && (iT + target.offsetHeight) > item.top && iT < (item.top + item.height)) {
      //     iL = Math.min(iL, item.left - target.offsetWidth);
      //   }
      //   // 上侧
      //   if (item.isTop && (iL + target.offsetWidth) > item.left && iL < (item.left + item.width)) {
      //     iT = Math.max(iT, item.top + item.height);
      //   }
      //   // 下侧
      //   if (item.isBottom && (iL + target.offsetWidth) > item.left && iL < (item.left + item.width)) {
      //     iT = Math.min(iT, item.top - target.offsetHeight);
      //   }
      // });
      target.style.left = iL + "px";
      target.style.top = iT + "px";
    },
    handleMouseUp(event) {
      if (!this.preview) return;
      event && event.stopPropagation();
      this.$emit("change", this.range, this.$refs.hotRef);
      document.onmousemove = null;
      document.onmouseup = null;
      document.onmousecancel = null;
    },
  },
};
</script>

<style lang="less">
.normal-home-hot-area-item {
  position: absolute;
  // border: 4px solid rgb(37, 49, 62);
  background: none;
  overflow: visible;

  &.preview {
    cursor: move;
    border: 2px solid #29b6b0;
    background: rgba(41, 182, 176, 0.25);
  }

  > div {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: #29b6b0;
    margin-left: -6px;
    margin-top: -6px;
  }
  .resizeLT {
    top: 0;
    left: 0;
    cursor: nw-resize;
  }
  .resizeT {
    top: 0;
    left: 50%;
    cursor: n-resize;
  }
  .resizeTR {
    top: 0;
    left: 100%;
    cursor: ne-resize;
    margin-left: -4px;
  }
  .resizeR {
    top: 50%;
    left: 100%;
    cursor: e-resize;
    margin-top: -5px;
    margin-left: -4px;
  }
  .resizeBR {
    top: 100%;
    left: 100%;
    cursor: se-resize;
    margin-top: -4px;
    margin-left: -4px;
  }
  .resizeB {
    top: 100%;
    left: 50%;
    cursor: s-resize;
    margin-top: -4px;
  }
  .resizeLB {
    top: 100%;
    left: 0;
    cursor: sw-resize;
    margin-top: -4px;
  }
  .resizeL {
    top: 50%;
    left: 0;
    cursor: w-resize;
    margin-top: -5px;
  }
  .range {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 0 0 50% 0;
    background: rgb(89, 179, 175);
    font-size: 20px;
    pointer-events: none;
    color: rgb(54, 126, 121);
  }
}
</style>
